<template>
  <div class="box_b">
    <div class="upload_box">
      <div class="upload_img" v-cloak="" ref="clickUp"></div>
    </div>
    <div class="drag_box" ref="upload">或者将图片拖动到此处</div>

    <div class="title_box">共上传3张</div>

    <div class="img_box">

      <div class="img_m" v-for="(fileItem,index) in files">
        <img :src="fileItem.imgUri" width="240" height="180" :title="fileItem.name" style="cursor: pointer" />
        <div class="img_shade" v-show="fileItem.is_send">{{fileItem.percent_text}}</div>
        <div class="img_shade_s"  v-show="fileItem.is_send" :style="{height:fileItem.percent}"></div>
        <div class="img_del">
          <i class="del"></i>
        </div>
      </div>
    </div>
    <button ref="upload_btn">上传按钮</button>
  </div>
</template>
<script type="text/ecmascript-6">
  import { getUploadAction } from 'otherAction/index';
  import  http    from  '../../../static/http/http';
  export default{
     name:'box_b',
     mixins: [http],
     data(){
         return {
              files:[],
              options:{
                  allow_types:'jpg|jpeg|png|gif',   //允许上传的文件或者图片类型 mime类型
                  maxSize:500000,                   //允许上传的文件大小 可以当做参数传递
                  uploadUri:'/api/admin/upload/run.html', //长传的api的名称
                  uploadName:'upload_file', //但上传使用upload_file 多上传那么就以upload_file+下标作为上传的upload from的文件名称
                  complete:(files,data)=>{
                     this.$nextTick((ts)=>{
                         //该文件显示
                         this.files =[...files];
                         console.log(this.files);
                     });
                  }, //上传成功的回调函数
                  errorHandler:(error,data)=>{
                      console.log(error,data);
                  }, //上传失败的时候的回调函数
                 dialogAction:(displayMsg)=>{

                 },
              },
              uploadObj:getUploadAction(),  //获得当前上传对象
         }
     },
     created(){
          //
     },
     mounted(){
        try{
            let options              =  Object.assign({},this.options);
            let that                 =  this;
            /*let options           = JSON.stringify(this.options);
            options               = JSON.parse(options);*/
            //可以加上我们的回调函数
            this.uploadObj.Context_set(options,that);
        }catch (e){
            //这里可以写记录日志的功能 可以使用node js 的 文件系统
            console.log(e);
        }
     },methods:{
        upload_test(){
          let fileStream      = document.createElement('input');
          fileStream.type     = 'file';
          fileStream.accept   ='image/*';
          fileStream.setAttribute('capture','camera');
          console.log(fileStream);
          fileStream.addEventListener('change',(event)=>{
                     let file   = fileStream.files[0];
                     let form_data    =new FormData();
                     form_data.append('file',file);
                     this.apiPost('/api/admin/upload/upload.html',form_data).then((response)=>{
                         console.log(response.data);
                     }).catch((response)=>{

                     })
          });
          fileStream.click();
        }
    },

  };
</script>
<style type="stylus">
  .box_b{width:804px; height:auto; overflow:hidden; border:1px solid #d1d6da; padding-top:20px; padding-bottom:20px; margin:0 auto; font-family:"微软雅黑";}
  .box_b .upload_box{width:240px; height:180px; float:left; border:1px dashed #d1d6da; margin-left:20px; cursor:pointer;}
  .box_b .upload_box .upload_img{width:64px; height:64px; background:url(./upd_img1.png) no-repeat; margin:58px auto;}
  .box_b .upload_box .upload_img:hover{background:url(./upd_img2.png) no-repeat;}
  .box_b .drag_box{width:500px; height:178px; border:1px dashed #d1d6da; text-align:center; color:#6b6b6b; font-size:14px; font-family:"微软雅黑"; float:left; line-height:178px; margin-left:20px;}
  .box_b .title_box{width:804px; height:40px; line-height:40px; color:#6b6b6b; font-size:16px; text-indent:20px; border-bottom:1px solid #d1d6da; border-top:1px solid #d1d6da; text-align:left; float:left; margin-top:20px;}
  .box_b .img_box{width:804px; height:auto; overflow:hidden; padding-top:20px;}
  .box_b .img_box .img_m{width:160px; height:120px; float:left; margin-left:20px; position:relative;}
  .box_b .img_box .img_m img{width:160px; height:120px;}
  .box_b .img_box .img_m .img_del{width:160px; height:30px; background:rgba(0, 0, 0, 0.4); position:absolute; top:0px; left:0px; display:none;}
  .box_b .img_box .img_m .img_del .del{width:21px; height:21px; background:url(./dell_11.png) no-repeat; float:right; margin-top:4px; margin-right:10px; cursor:pointer;}
  .box_b .img_box .img_m .img_shade{width:160px; height:120px; position:absolute; top:0px; left:0px; line-height:120px; text-align:center; font-size:14px; color:#888888;}
  .box_b .img_box .img_m .img_shade_s{width:160px; background:rgba(0, 0, 0, 0.4); position:absolute; bottom :0px;  left:0px;}
</style>
